<template>
    <div class="monitor-container">
        <!-- 顶部标题和状态栏 -->
        <div class="header">
            <div>
                <span class="device-info">设备识别码: {{ equipmentId }}</span>
                <span class="imei-info">数据发送时间: {{ formatSendTime }}</span>
                <el-button type="success" style="color: #fff;font-size: 18px;margin-left: 15px"
                           @click="erasure()">消音
                </el-button>
            </div>
            <div class="status-bar">
                <span :class="['status', systemStatus]">{{ systemStatusText }}</span>
            </div>
        </div>

        <!-- 主内容区 -->
        <div class="main-content">
            <!-- 左侧监测数据卡片 -->
            <div class="left-panel">
                <!-- 漏电监测卡片 -->
                <div class="card">
                    <div class="card-header">
                        <h3>漏电监测</h3>
                        <div class="status-flags">
                    <span :class="leakvs === 0 ? 'normal' : leakvs === 1 ? 'alarm' : 'warning'">
                        {{ leakvs === 0 ? '正常' : leakvs === 1 ? '过流' : '预警' }}
                    </span>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="gauge-container">
                            <div class="gauge">
                                <div class="gauge-body">
                                    <div class="gauge-fill"
                                         :style="{ transform: `rotate(${leakagePercentage}deg)` }"
                                         :class="leakvs === 0 ? 'normal' : leakvs === 1 ? 'alarm' : leakvs === 2 ? 'warning' : 'normal'">
                                    </div>
                                </div>
                                <div class="gauge-value">
                                    {{ leakv }} mA
                                </div>
                            </div>
                        </div>
                        <div class="alarm-status" v-if="leakvs === 1 || leakvs === 2">
                            <i :class="['alarm-icon', leakvs === 1 ? 'alarm' : 'warning']"></i>
                            <span :class="leakvs === 1 ? 'alarm' : 'warning'">
                        {{ leakvs === 1 ? '漏电报警!' : '漏电预警!' }}
                    </span>
                        </div>
                    </div>
                </div>
                <!-- 电压电流卡片 -->
                <div class="card">
                    <div class="card-header">
                        <h3>电压与电流</h3>
                    </div>
                    <div class="card-body">
                        <div class="voltage-current-grid">
                            <div class="param-row">
                                <span class="param-label">A相电压</span>
                                <span class="param-value" :class="paramUsStatus(uas)">{{ usState(uas) }}</span>
                                <span class="param-value" :class="paramUsStatus(uas)">{{ ua }} V</span>
                            </div>
                            <div class="param-row">
                                <span class="param-label">A相电流</span>
                                <span class="param-value" :class="paramCsStatus(cas)">{{ csState(cas) }}</span>
                                <span class="param-value" :class="paramCsStatus(cas)">{{ ca }} A</span>
                            </div>
                            <div class="param-row">
                                <span class="param-label">B相电压</span>
                                <span class="param-value" :class="paramUsStatus(ubs)">{{ usState(ubs) }}</span>
                                <span class="param-value" :class="paramUsStatus(ubs)">{{ ub }} V</span>
                            </div>
                            <div class="param-row">
                                <span class="param-label">B相电流</span>
                                <span class="param-value" :class="paramCsStatus(cbs)">{{ csState(cbs) }}</span>
                                <span class="param-value" :class="paramCsStatus(cbs)">{{ cb }} A</span>
                            </div>
                            <div class="param-row">
                                <span class="param-label">C相电压</span>
                                <span class="param-value" :class="paramUsStatus(ucs)">{{ usState(ucs) }}</span>
                                <span class="param-value" :class="paramUsStatus(ucs)">{{ uc }} V</span>
                            </div>
                            <div class="param-row">
                                <span class="param-label">C相电流</span>
                                <span class="param-value" :class="paramCsStatus(ccs)">{{ csState(ccs) }}</span>
                                <span class="param-value" :class="paramCsStatus(ccs)">{{ cc }} A</span>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 设备状态卡片 -->
                <div class="card">
                    <div class="card-header">
                        <h3>设备状态</h3>
                    </div>
                    <div class="card-body">
                        <div class="dido-grid">
                            <div class="param-row">
                                <span class="param-label">信号强度</span>
                                <span class="param-value">{{dsignal}}</span>
                            </div>
                            <div class="param-row">
                                <span class="param-label">电池状态</span>
                                <span class="param-value" :class="paramBatterysStatus(batterys)">{{ batterysStatus(batterys) }}</span>
                            </div>
                            <div class="param-row">
                                <span class="param-label">电池电量</span>
                                <span class="param-value">{{volvalue}} %</span>
                            </div>
                            <div class="param-row">
                                <span class="param-label">电池电压</span>
                                <span class="param-value">{{voltagevalue}} mV</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 右侧电力参数卡片 -->
            <div class="right-panel">
                <!-- 温度监测卡片 -->
                <div class="card" style="min-height: 340px">
                    <div class="card-header">
                        <h3>温度监测</h3>
                    </div>
                    <div class="card-body">
                        <div class="voltage-current-grid">
                            <div class="param-row">
                                <span class="param-label">A相温度</span>
                                <span class="param-value" :class="paramCsStatus(tas)">{{ tsState(tas) }}</span>
                                <span class="param-value" :class="paramCsStatus(tas)">{{ ta }} °C</span>
                            </div>
                            <div class="param-row">
                                <span class="param-label">B相温度</span>
                                <span class="param-value" :class="paramCsStatus(tbs)">{{ tsState(tbs) }}</span>
                                <span class="param-value" :class="paramCsStatus(tbs)">{{ tb }} °C</span>
                            </div>
                            <div class="param-row">
                                <span class="param-label">C相温度</span>
                                <span class="param-value" :class="paramCsStatus(tcs)">{{ tsState(tcs) }}</span>
                                <span class="param-value" :class="paramCsStatus(tcs)">{{ tc }} °C</span>
                            </div>
                            <div class="param-row">
                                <span class="param-label">D相温度</span>
                                <span class="param-value" :class="paramCsStatus(tds)">{{ tsState(tds) }}</span>
                                <span class="param-value" :class="paramCsStatus(tds)">{{ td }} °C</span>
                            </div>
                            <div class="param-row">
                                <span class="param-label">N相温度</span>
                                <span class="param-value" :class="paramCsStatus(tns)">{{ tsState(tns) }}</span>
                                <span class="param-value" :class="paramCsStatus(tns)">{{ tn }} °C</span>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 功率电能卡片 -->
                <div class="card">
                    <div class="card-header">
                        <h3>功率与电能</h3>
                    </div>
                    <div class="card-body">
                        <div class="power-grid">
                            <div class="param-row">
                                <span class="param-label">功率因数</span>
                                <span class="param-value">{{ pf }}</span>
                            </div>
                            <div class="param-row">
                                <span class="param-label">有功电能</span>
                                <span class="param-value">{{ eqt }} kWh</span>
                            </div>
                            <div class="param-row">
                                <span class="param-label">功率</span>
                                <span class="param-value">{{ p }} W</span>
                            </div>
                            <div class="param-row">
                                <span class="param-label">总有功功率</span>
                                <span class="param-value">{{ q }} W</span>
                            </div>
                            <div class="param-row">
                                <span class="param-label">A相有功功率</span>
                                <span class="param-value">{{ qa }} W</span>
                            </div>
                            <div class="param-row">
                                <span class="param-label">B相有功功率</span>
                                <span class="param-value">{{ qb }} W</span>
                            </div>
                            <div class="param-row">
                                <span class="param-label">C相有功功率</span>
                                <span class="param-value">{{ qc }} W</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 安装信息卡片 -->
                <div class="card" v-if="warnTime === ''">
                    <div class="card-header">
                        <h3>安装信息</h3>
                    </div>
                    <div class="card-body">
                        <div class="control-grid">
                            <div class="param-row">
                                <span class="param-label">设备型号</span>
                                <span class="param-value">{{ dtypename }}</span>
                            </div>
                            <div class="param-row">
                                <span class="param-label">安装站点</span>
                                <span class="param-value">{{ siaddress }}</span>
                            </div>
                            <div class="param-row">
                                <span class="param-label">安装楼层</span>
                                <span class="param-value">{{ sitelname }}</span>
                            </div>
                            <div class="param-row">
                                <span class="param-label">详细地址</span>
                                <span class="param-value">{{ installaddress }}</span>
                            </div>
                            <div class="param-row">
                                <span class="param-label">经度</span>
                                <span class="param-value">{{ longitude }}</span>
                            </div>
                            <div class="param-row">
                                <span class="param-label">纬度</span>
                                <span class="param-value">{{ latitude }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 报警信息栏 -->
        <div class="alarm-panel" :class="{ active: hasAlarm }">
            <div class="alarm-header">
                <h3>报警信息</h3>
                <span class="alarm-count" v-if="alarms.length > 0">{{ alarms.length }}条报警</span>
            </div>
            <div class="alarm-list">
                <div
                        v-for="(alarm, index) in alarms"
                        :key="index"
                        class="alarm-item"
                >
                    <div class="alarm-time">{{ alarm.time }}</div>
                    <div class="alarm-content">{{ alarm.content }}</div>
                </div>
                <div class="no-alarm" v-if="alarms.length === 0">无报警信息</div>
            </div>
        </div>
    </div>
</template>

<script>
    import request from "@/utils/request";
    import axios from 'axios';

    export default {
        name: "CurrentDqData",
        data() {
            return {
                // 设备基本信息
                equipmentInputStoreId: this.$route.query.equipmentInputStoreId || '',
                equipmentId: this.$route.query.equipmentId || '',
                warnTime: this.$route.query.warnTime || '',
                sendTime: null,

                // 数据信息
                messagetype: null,         // 事件类型
                devicetype: "",      // 设备类型
                mac: "",       // 设备MAC
                imsi: "",        // IMSI
                dsignal: null,     // 信号强度
                batterys: null,       // 电池状态
                voltagevalue: null,       // 电压值(mV)
                volvalue: null,       // 电量(%)
                dtypename: "",        // 设备型号
                siaddress: "",        // 设备安装的站点地址
                sitelname: "",        // 设备安装的楼层
                installaddress: "",   // 设备安装的详细地址
                longitude: null,         // 经度
                latitude: null,          // 纬度

                // 设备信息
                uas: null,     // A相电压状态
                ua: "",       // A相电压值
                ubs: null,       // B相电压状态
                ub: "",       // B相电压值
                ucs: null,       // C相电压状态
                uc: "",      // C相电压值
                cas: null,        // A相电流状态
                ca: "",        // A相电流值
                cbs: null,        // B相电流状态
                cb: "",        // B相电流值
                ccs: null,          // C相电流状态
                cc: "",          // C相电流值
                leakvs: null,          // 漏电流状态
                leakv: "",          // 漏电流值

                tas: null,       // A相温度状态
                ta: "",       // A相温度值
                tbs: null,       // B相温度状态
                tb: "",      // B相温度值
                tcs: null,        // C相温度状态
                tc: "",        // C相温度值
                tds: null,        // D相温度状态
                td: "",        // D相温度值
                tns: null,          // N相温度状态
                tn: "",          // N相温度值
                pf: "",          // 功率因数
                eqt: "",          // 有功电能 单位kvarh
                p: "",          // 功率
                q: "",          // 总有功功率 单位kvarh
                qa: "",          // A相有功功率 单位kvarh
                qb: "",          // B相有功功率 单位kvarh
                qc: "",          // C相有功功率 单位kvarh

                // 报警阈值
                leakageAlarmThreshold: 300, // 漏电报警阈值(mA)
                tempAlarmThreshold: 60,     // 温度报警阈值(℃)

                // 报警信息
                alarms: [],

                // 定时器
                updateTimer: null
            }
        },
        computed: {
            // 格式化发送时间
            formatSendTime() {
                if (!this.sendTime) return '';
                return new Date(this.sendTime).toLocaleString();
            },

            // 计算漏电百分比(用于仪表盘显示)
            leakagePercentage() {
                const max = 1000; // 最大显示1000mA
                const value = Math.min(this.leakv, max);
                return (value / max) * 180 - 90; // -90到90度
            },

            // 系统状态和文本
            systemStatus() {
                if (this.alarms.length > 0) {
                    return 'alarm';
                }
                return 'normal';
            },

            systemStatusText() {
                if (this.messagetype === 0) {
                    return '其他';
                } else if (this.messagetype === 1) {
                    return '设备心跳';
                } else if (this.messagetype === 2) {
                    return '设备报警';
                } else if (this.messagetype === 3) {
                    return '报警恢复';
                } else if (this.messagetype === 4) {
                    return '防拆报警';
                } else if (this.messagetype === 5) {
                    return '防拆恢复';
                } else if (this.messagetype === 6) {
                    return '电池低压';
                } else if (this.messagetype === 7) {
                    return '电池低压恢复';
                } else if (this.messagetype === 8) {
                    return '自检';
                } else if (this.messagetype === 9) {
                    return '故障';
                } else if (this.messagetype === 10) {
                    return '故障恢复';
                } else if (this.messagetype === 11) {
                    return '测试';
                } else if (this.messagetype === 12) {
                    return '电量统计';
                } else if (this.messagetype === 13) {
                    return '温度报警';
                } else if (this.messagetype === 14) {
                    return '温度报警恢复';
                } else if (this.messagetype === 15) {
                    return '红外检测报警';
                } else if (this.messagetype === 16) {
                    return '红外检测报警恢复';
                } else if (this.messagetype === 17) {
                    return '气体浓度超标报警';
                } else if (this.messagetype === 18) {
                    return '气体浓度超标报警恢复';
                } else {
                    return '正常';
                }
            },

            // 是否有任何报警
            hasAlarm() {
                // 检查报警
                if (this.alarms.length > 0) return true;
                return false;
            }
        },
        methods: {
            // 电池状态
            batterysStatus(value) {
                return value === 1 ? '正常' : value === 0 ? '低压' : '';
            },

            paramBatterysStatus(value) {
                return value === 1 ? 'normal' : value === 0 ? 'alarm' : 'normal';
            },

            // 防拆状态
            tamperstatusStatus(value) {
                return value === 0 ? '闭合' : value === 1 ? '打开' : '';
            },

            paramTamperstatusStatus(value) {
                return value === 0 ? 'normal' : value === 1 ? 'alarm' : 'normal';
            },

            // 电压状态
            usState(value) {
                if (value === 0) {
                    return "正常";
                } else if (value === 1) {
                    return "过压报警";
                } else if (value === 2) {
                    return "欠压报警";
                } else if (value === 3) {
                    return "过压预警";
                } else if (value === 4) {
                    return "欠压预警";
                } else {
                    return "";
                }
            },

            paramUsStatus(value) {
                if (value === 0) {
                    return "normal";
                } else if (value === 1) {
                    return "alarm";
                } else if (value === 2) {
                    return "alarm";
                } else if (value === 3) {
                    return "warning";
                } else if (value === 4) {
                    return "warning";
                } else {
                    return "normal";
                }
            },

            // 电流状态
            csState(value) {
                if (value === 0) {
                    return "正常";
                } else if (value === 1) {
                    return "过流";
                } else if (value === 2) {
                    return "预警";
                } else {
                    return "";
                }
            },

            paramCsStatus(value) {
                if (value === 0) {
                    return "normal";
                } else if (value === 1) {
                    return "alarm";
                } else if (value === 2) {
                    return "warning";
                } else {
                    return "normal";
                }
            },

            // 温度状态
            tsState(value) {
                if (value === 0) {
                    return "正常";
                } else if (value === 1) {
                    return "超温";
                } else if (value === 2) {
                    return "预警";
                } else {
                    return "";
                }
            },

            // 从后端接口获取实时数据
            async fetchRealtimeData() {
                try {
                    let response = '';
                    if (this.warnTime != "") {
                        response = await request.get("/warn-dq/getInfo?equipmentInputStoreId=" + this.equipmentInputStoreId + "&warnTime=" + this.warnTime);
                    } else {
                        response = await request.get(`/current-dq/${this.equipmentInputStoreId}`);
                    }

                    if (response.data) {
                        this.parseRealtimeData(response.data);
                    }
                } catch (error) {
                    console.error('获取实时数据失败:', error);
                }
            },

            // 解析实时数据
            parseRealtimeData(data) {
                this.equipmentInputStoreId = data.equipmentInputStoreId || '';
                this.sendTime = data.sendTime;
                this.messagetype = data.messagetype;
                this.devicetype = data.devicetype;
                this.mac = data.mac;
                this.imsi = data.imsi;
                this.dsignal = data.dsignal;
                this.batterys = data.batterys;
                this.voltagevalue = data.voltagevalue;
                this.volvalue = data.volvalue;
                this.uas = data.uas;
                this.ua = data.ua;
                this.ubs = data.ubs;
                this.ub = data.ub;
                this.ucs = data.ucs;
                this.uc = data.uc;
                this.cas = data.cas;
                this.ca = data.ca;
                this.cbs = data.cbs;
                this.cb = data.cb;
                this.ccs = data.ccs;
                this.cc = data.cc;
                this.leakvs = data.leakvs;
                this.leakv = data.leakv;
                this.tas = data.tas;
                this.ta = data.ta;
                this.tbs = data.tbs;
                this.tb = data.tb;
                this.tcs = data.tcs;
                this.tc = data.tc;
                this.tds = data.tds;
                this.td = data.td;
                this.tns = data.tns;
                this.tn = data.tn;
                this.pf = data.pf;
                this.eqt = data.eqt;
                this.p = data.p;
                this.q = data.q;
                this.qa = data.qa;
                this.qb = data.qb;
                this.qc = data.qc;
                this.dtypename = data.dtypename;
                this.siaddress = data.siaddress;
                this.sitelname = data.sitelname;
                this.installaddress = data.installaddress;
                this.longitude = data.longitude;
                this.latitude = data.latitude;
                // 处理报警信息
                this.handleAlarms();
            },

            // 处理报警信息
            handleAlarms() {
                const newAlarms = [];
                const currentTime = this.formatSendTime;

                if (this.messagetype === 2) {
                    newAlarms.push({
                        time: currentTime,
                        content: `设备报警`
                    });
                } else if (this.messagetype === 4) {
                    newAlarms.push({
                        time: currentTime,
                        content: `防拆报警`
                    });
                } else if (this.messagetype === 6) {
                    newAlarms.push({
                        time: currentTime,
                        content: `电池低压`
                    });
                } else if (this.messagetype === 9) {
                    newAlarms.push({
                        time: currentTime,
                        content: `故障`
                    });
                } else if (this.messagetype === 13) {
                    newAlarms.push({
                        time: currentTime,
                        content: `温度报警`
                    });
                } else if (this.messagetype === 15) {
                    newAlarms.push({
                        time: currentTime,
                        content: `红外检测报警`
                    });
                } else if (this.messagetype === 17) {
                    newAlarms.push({
                        time: currentTime,
                        content: `气体浓度超标报警`
                    });
                }

                // 漏电报警
                if (this.leakvs === 1) {
                    newAlarms.push({
                        time: currentTime,
                        content: `漏电值超过阈值(${this.leakv}mA > ${this.leakageAlarmThreshold}mA)`
                    });
                }

                if (this.uas === 1) {
                    newAlarms.push({
                        time: currentTime,
                        content: `A相电压过压报警`
                    });
                }
                if (this.uas === 2) {
                    newAlarms.push({
                        time: currentTime,
                        content: `A相电压欠压报警`
                    });
                }
                if (this.ubs === 1) {
                    newAlarms.push({
                        time: currentTime,
                        content: `B相电压过压报警`
                    });
                }
                if (this.ubs === 2) {
                    newAlarms.push({
                        time: currentTime,
                        content: `B相电压欠压报警`
                    });
                }
                if (this.ucs === 1) {
                    newAlarms.push({
                        time: currentTime,
                        content: `C相电压过压报警`
                    });
                }
                if (this.ucs === 2) {
                    newAlarms.push({
                        time: currentTime,
                        content: `C相电压欠压报警`
                    });
                }

                if (this.cas === 1) {
                    newAlarms.push({
                        time: currentTime,
                        content: `A相电流过流报警`
                    });
                }
                if (this.cbs === 1) {
                    newAlarms.push({
                        time: currentTime,
                        content: `B相电流过流报警`
                    });
                }
                if (this.ccs === 1) {
                    newAlarms.push({
                        time: currentTime,
                        content: `C相电流过流报警`
                    });
                }

                // 温度报警
                if (this.tas === 1) {
                    newAlarms.push({
                        time: currentTime,
                        content: `A相温度超温报警`
                    });
                }
                if (this.tbs === 1) {
                    newAlarms.push({
                        time: currentTime,
                        content: `B相温度超温报警`
                    });
                }
                if (this.tcs === 1) {
                    newAlarms.push({
                        time: currentTime,
                        content: `C相温度超温报警`
                    });
                }
                if (this.tds === 1) {
                    newAlarms.push({
                        time: currentTime,
                        content: `D相温度超温报警`
                    });
                }
                if (this.tns === 1) {
                    newAlarms.push({
                        time: currentTime,
                        content: `N相温度超温报警`
                    });
                }

                // 电池低压
                if (this.batterys === 0) {
                    newAlarms.push({
                        time: currentTime,
                        content: `电池低压`
                    });
                }

                // 合并新报警(去重)
                newAlarms.forEach(alarm => {
                    const exists = this.alarms.some(a => a.content === alarm.content && a.time === alarm.time);
                    if (!exists) {
                        this.alarms.unshift(alarm); // 最新的报警放前面
                    }
                });

                // 限制报警列表长度
                if (this.alarms.length > 10) {
                    this.alarms = this.alarms.slice(0, 10);
                }
            },
            // 消音
            erasure() {
                if (this.equipmentId) {
                    request.get("/client/getMonitorkeyByEquip?equipmentInputStoreId=" + this.equipmentInputStoreId).then(res => {
                        if (res.code === "200") {
                            if(res.data !== null && res.data !== "") {
                                axios.post("https://ht.v3.iothonest.com/system/iot/monitor/xn/v1/upflset", {
                                    mac: this.equipmentId,
                                    type: 1,
                                }, {
                                    headers: {
                                        'Content-Type': 'application/ison;charset=utf-8',
                                        'monitorkey': res.data
                                    }
                                }).then(res => {
                                    if (res.code === 0) {
                                        this.$message({
                                            message: "操作成功",
                                            type: "success"
                                        })
                                    } else {
                                        this.$message.error("操作失败" + res.msg)
                                    }
                                })
                            }
                        }

                    })
                }
            }
        },
        mounted() {
            // 启动定时更新数据(每60秒)
            this.updateTimer = setInterval(() => {
                this.fetchRealtimeData();
            }, 60000);

            // 初始加载数据
            this.fetchRealtimeData();
        },
        beforeDestroy() {
            // 清除定时器
            if (this.updateTimer) {
                clearInterval(this.updateTimer);
            }
        }
    }
</script>

<style scoped>
    .monitor-container {
        font-family: 'Arial', sans-serif;
        color: #ffffff;
        width: 100%;
        margin: 0 auto;
        padding: 20px;
        min-height: 100vh;
    }

    .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
        padding-bottom: 10px;
        border-bottom: 1px solid #ddd;
        flex-wrap: wrap;
    }

    .device-info {
        color: #ffffff;
        font-size: 18px;
        margin-right: 20px;
    }

    .imei-info {
        color: #ffffff;
        font-size: 18px;
    }

    .status-bar {
        display: flex;
        align-items: center;
        gap: 20px;
    }

    .status {
        padding: 5px 10px;
        border-radius: 4px;
        font-weight: bold;
    }

    .status.normal {
        background-color: #4CAF50;
        color: white;
    }

    .status.warning {
        background-color: #FFC107;
        color: #333;
    }

    .status.alarm {
        background-color: #F44336;
        color: white;
        animation: blink 1s infinite;
    }

    .status.abnormal {
        background-color: #FF9800;
        color: white;
    }

    .comm-status {
        padding: 5px 10px;
        border-radius: 4px;
        font-weight: bold;
    }

    .comm-status.normal {
        background-color: #4CAF50;
        color: white;
    }

    .comm-status.abnormal {
        background-color: #F44336;
        color: white;
    }

    .time {
        color: #ffffff;
    }

    .main-content {
        display: flex;
        gap: 20px;
        margin-bottom: 20px;
        flex-wrap: wrap;
    }

    .left-panel, .right-panel {
        flex: 1;
        min-width: 400px;
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .card {
        background: linear-gradient(135deg, #142339, #152555);
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        overflow: hidden;
    }

    .card-header {
        padding: 15px 20px;
        background-color: #2c3e50;
        color: #ffffff;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .card-header h3 {
        margin: 0;
        font-size: 18px;
    }

    .status-flags {
        display: flex;
        gap: 10px;
        font-size: 14px;
    }

    .status-flags .enabled {
        color: #4CAF50;
    }

    .status-flags .warning {
        color: #FF9800;
    }

    .status-flags .alarm {
        color: #F44336;
    }

    .status-flags .normal {
        color: #4CAF50;
    }

    .alarm-value {
        font-size: 14px;
        opacity: 0.8;
    }

    .card-body {
        padding: 20px;
    }

    .gauge-container {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .gauge {
        position: relative;
        width: 165px;
        height: 165px;
        margin-bottom: 10px;
    }

    .gauge-body {
        width: 100%;
        height: 100%;
        background-color: #f5f5f5;
        border-radius: 50%;
        position: relative;
        overflow: hidden;
        border: 10px solid #e0e0e0;
    }

    .gauge-fill {
        position: absolute;
        top: 0;
        left: 0;
        width: 50%;
        height: 100%;
        transform-origin: right center;
        transform: rotate(-90deg);
        transition: transform 0.5s ease, background-color 0.5s ease;
    }

    .gauge-fill.normal {
        background-color: #4CAF50;
    }

    .gauge-fill.alarm {
        background-color: #F44336;
    }

    .gauge-fill.warning {
        background-color: #FF9800;
    }

    .gauge-disabled {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #F44336;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #9e9e9e;
        font-size: 14px;
    }

    .gauge-value {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 24px;
        font-weight: bold;
        color: #333;
    }

    .gauge-label {
        display: flex;
        justify-content: space-between;
        width: 100%;
        padding: 0 10px;
        color: #ffffff;
    }

    .temp-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }

    .temp-item {
        padding: 15px;
        border-radius: 6px;
        border: 1px solid green;
        text-align: center;
        transition: all 0.3s;
    }

    .temp-item.alarm {
        border: 1px solid #F44336;
        animation: pulse 1.5s infinite;
    }

    .temp-item.disabled {
        border: 1px solid #e0e0e0;
        opacity: 0.6;
    }

    .temp-item.fault {
        border: 1px solid #FF9800;
    }

    .temp-value {
        font-size: 24px;
        font-weight: bold;
        margin-bottom: 5px;
    }

    .temp-value.alarm {
        color: #F44336;
    }

    .temp-label {
        font-size: 14px;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 8px;
    }

    .temp-label .normal {
        color: #4CAF50;
    }

    .temp-label .alarm {
        color: #F44336;
    }

    .temp-status {
        font-size: 12px;
        padding: 2px 6px;
        border-radius: 10px;
    }

    .temp-status.alarm {
        color: #F44336;
    }

    .temp-status:empty {
        display: none;
    }

    .voltage-current-grid, .power-grid, .harmonics-grid, .dido-grid, .control-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }

    .param-row {
        display: flex;
        justify-content: space-between;
        padding: 10px;
        border-bottom: 1px solid #eee;
    }

    .param-label {
        color: #ffffff;
    }

    .param-value {
        font-weight: bold;
    }

    .param-value.alarm {
        color: #F44336;
    }

    .param-value.warning {
        color: #FF9800;
    }

    .param-value.normal {
        color: #4CAF50;
    }

    .control-panel {
        margin-bottom: 20px;
    }

    .alarm-panel {
        background: linear-gradient(135deg, #142339, #152555);
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        transition: all 0.3s;
    }

    .alarm-panel.active {
        border-left: 5px solid #F44336;
    }

    .alarm-header {
        padding: 15px 20px;
        background-color: #2c3e50;
        color: white;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .alarm-count {
        background-color: #F44336;
        padding: 3px 8px;
        border-radius: 12px;
        font-size: 14px;
    }

    .alarm-list {
        max-height: 200px;
        overflow-y: auto;
    }

    .alarm-item {
        padding: 12px 20px;
        border-bottom: 1px solid #eee;
    }

    .alarm-item:last-child {
        border-bottom: none;
    }

    .alarm-time {
        font-size: 12px;
        color: #ffffff;
        margin-bottom: 5px;
    }

    .alarm-content {
        font-weight: 500;
    }

    .no-alarm {
        padding: 20px;
        text-align: center;
        color: #ffffff;
    }

    .alarm-status {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 20px;
        padding: 10px;
        border-radius: 6px;
        font-weight: bold;
    }

    .alarm-status .alarm {
        background-color: rgba(244, 67, 54, 0.2);
        color: #F44336;
    }

    .alarm-status .warning {
        background-color: rgba(255, 152, 0, 0.2);
        color: #FF9800;
    }

    .alarm-icon {
        display: inline-block;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        margin-right: 8px;
    }

    .alarm-icon.alarm {
        background-color: #F44336;
    }

    .alarm-icon.warning {
        background-color: #FF9800;
    }

    .alarm-text {
        font-size: 14px;
    }

    .ratio-info {
        font-size: 12px;
        display: flex;
        gap: 10px;
        opacity: 0.8;
    }

    @keyframes blink {
        0% {
            opacity: 1;
        }
        50% {
            opacity: 0.5;
        }
        100% {
            opacity: 1;
        }
    }

    @keyframes pulse {
        0% {
            box-shadow: 0 0 0 0 rgba(244, 67, 54, 0.4);
        }
        70% {
            box-shadow: 0 0 0 10px rgba(244, 67, 54, 0);
        }
        100% {
            box-shadow: 0 0 0 0 rgba(244, 67, 54, 0);
        }
    }

    @media (max-width: 900px) {
        .main-content {
            flex-direction: column;
        }

        .left-panel, .right-panel {
            min-width: 100%;
        }

        .voltage-current-grid, .power-grid, .harmonics-grid, .dido-grid, .control-grid {
            grid-template-columns: 1fr;
        }
    }
</style>
